<template>
  <div class="crash-box">
    <el-form class="query-form" :inline="true" v-model="crashForm">
      <el-row>
        <el-form-item label="平台">
          <el-select v-model="crashForm.platform" clearable placeholder="请选择" size="small" @change="changePlatform">
            <el-option 
            v-for="item in crashForm.platforms" 
            :key="item.value" 
            :label="item.label" 
            :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="平台版本">
          <el-select v-model="crashForm.platVersion" clearable filterable placeholder="请选择" size="small">
            <el-option 
            v-for="item in crashForm.platVersions" 
            :key="item.value" 
            :label="item.label" 
            :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="版本">
          <el-select v-model="crashForm.appVersion" multiple filterable value-key="appVersion" placeholder="请选择" size="small">
            <el-option 
            v-for="item in crashForm.appVersions" 
            :key="item.value" 
            :label="item.label" 
            :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备品牌">
          <el-select v-model="crashForm.deviceBrand" multiple filterable value-key="deviceBrand" placeholder="请选择" size="small">
            <el-option 
            v-for="item in crashForm.deviceBrands" 
            :key="item.value" 
            :label="item.label" 
            :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="crashForm.type" placeholder="请选择" size="small">
            <el-option
            v-for="item in crashForm.types"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间">
          <el-date-picker class="date-picker"
          size="small"
          v-model="crashForm.dateSelect"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :default-time="['00:00:00', '23:59:59']">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="会员卡号">
          <el-input class="card-number" type="text" v-model="crashForm.unionId" clearable placeholder="请输入会员号" size="small">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" :loading="false" @click="getCrashList">查询</el-button>
        </el-form-item>
      </el-row>
    </el-form>

    <el-table :data="crashList" style="width: 100%;" v-loading="isLoading">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="right" label-width="90px" inline class="table-form-expand">
            <el-form-item>
              <label>崩溃时间</label>
              <span>{{ props.row.crashTime }}</span>
            </el-form-item>
            <el-form-item>
              <label>会员卡号</label>
              <span>{{ props.row.unionId }}</span>
            </el-form-item>
            <el-form-item>
              <label>版本</label>
              <span>{{ props.row.appVersion }}</span>
            </el-form-item>
            <el-form-item>
              <label>平台</label>
              <span>{{ props.row.platform }}</span>
            </el-form-item>
            <el-form-item>
              <label>平台版本</label>
              <span>{{ props.row.platVersion }}</span>
            </el-form-item>
            <el-form-item>
              <label>设备品牌</label>
              <span>{{ props.row.deviceBrand }}</span>
            </el-form-item>
            <el-form-item>
              <label>设备型号</label>
              <span>{{ props.row.deviceModel }}</span>
            </el-form-item>
            <el-form-item>
              <label>类型</label>
              <span>{{ props.row.type === 'crash' ? '崩溃' : '用户行为' }}</span>
            </el-form-item>
            <el-form-item class="width-block">
              <label>原因</label>
              <span>{{ props.row.reason }}</span>
            </el-form-item>
          </el-form>
        </template> 
      </el-table-column>
      <el-table-column prop="type" label="类型" width="60">
        <template slot-scope="scope">
          <img v-show="scope.row.type === 'crash'" src="~@/assets/img/warning.png" alt="崩溃" width="20">
        </template>
      </el-table-column>
      <el-table-column prop="crashTime" label="事件时间" width="170"></el-table-column>
      <el-table-column prop="unionId" label="会员卡号" width=""></el-table-column>
      <el-table-column prop="appVersion" label="版本" width=""></el-table-column>
      <el-table-column prop="platform" label="平台" width=""></el-table-column>
      <el-table-column prop="platVersion" label="平台版本" width=""></el-table-column>
      <el-table-column prop="deviceBrand" label="设备品牌" width=""></el-table-column>
      <el-table-column prop="reason" label="原因" :show-overflow-tooltip="isOverflowed" width="" min-width="250"></el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currPage"
      :page-sizes="[10, 20, 30, 50, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount">
    </el-pagination>
  </div>
</template>
<script>
  import moment from 'moment'

  var crashList = [
    {
      'reason': 'ReferenceError: Can not find variable: page',
      'crashTime': '2018-06-08 10:45:26',
      'appVersion': '2.0.33',
      'unionId': '366062755',
      'platform': 'ios',
      'deviceID': '4214AA03E1AD44AB8F0523947FB99311',
      'appId': '1',
      'deviceBrand': 'iPhone',
      'platVersion': '11.2.6',
      'crashContent': 'reason=ReferenceError: Can not find variable: page\ncrashTime=2018-06-08 10:45:26\nappVersion=2.0.33\nunionId=366062755\nplatform=h5\ndeviceID=4214AA03E1AD44AB8F0523947FB99311\nappId=1\ndeviceBrand=iPhone\nplatVersion=11.2.6\ndeviceModel=iPhone10,3\n\ncrashReason=ReferenceError: Can not find variable: page\n\n',
      'deviceModel': 'iPhone10,3'
    },
    {
      'reason': 'ReferenceError: Can not find variable: page',
      'crashTime': '2018-06-08 10:45:26',
      'appVersion': '2.0.33',
      'unionId': '366062755',
      'platform': 'aos',
      'deviceID': '4214AA03E1AD44AB8F0523947FB99311',
      'appId': '2',
      'deviceBrand': 'iPhone',
      'platVersion': '11.2.6',
      'crashContent': 'reason=ReferenceError: Can not find variable: page\ncrashTime=2018-06-08 10:45:26\nappVersion=2.0.33\nunionId=366062755\nplatform=h5\ndeviceID=4214AA03E1AD44AB8F0523947FB99311\nappId=1\ndeviceBrand=iPhone\nplatVersion=11.2.6\ndeviceModel=iPhone10,3\n\ncrashReason=ReferenceError: Can not find variable: page\n\n',
      'deviceModel': 'iPhone10,3'
    },
    {
      'reason': 'ReferenceError: Can not find variable: page',
      'crashTime': '2018-06-08 10:45:26',
      'appVersion': '2.0.33',
      'unionId': '366062755',
      'platform': 'h5',
      'deviceID': '4214AA03E1AD44AB8F0523947FB99311',
      'appId': '3',
      'deviceBrand': 'iPhone',
      'platVersion': '11.2.6',
      'crashContent': 'reason=ReferenceError: Can not find variable: page\ncrashTime=2018-06-08 10:45:26\nappVersion=2.0.33\nunionId=366062755\nplatform=h5\ndeviceID=4214AA03E1AD44AB8F0523947FB99311\nappId=1\ndeviceBrand=iPhone\nplatVersion=11.2.6\ndeviceModel=iPhone10,3\n\ncrashReason=ReferenceError: Can not find variable: page\n\n',
      'deviceModel': 'iPhone10,3'
    }
  ]

  export default {
    data () {
      return {
        isOverflowed: true,
        crashForm: {
          platform: '',
          platforms: [
            {label: '全部', value: '', versions: []}
          ],
          platVersion: '',
          platVersions: [],
          appVersion: '',
          appVersions: [],
          deviceBrand: '',
          deviceBrands: [],
          type: '全部',
          types: [
            {label: '全部', value: ''},
            {label: '崩溃信息', value: 'crash'},
            {label: '用户行为', value: 'uba'}
          ],
          dateSelect: [moment().format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD HH:mm:ss')], // 数组，包括开始时间、结束时间
          unionId: ''
        },
        isLoading: false,
        crashList: crashList,
        currPage: 1,
        pageSize: 10,
        totalCount: 0
      }
    },
    activated () {
      this.getPlatformAndPlatVersion()
      this.getAppVersions()
      this.getDeviceBrands()
      this.getCrashList()
    },
    methods: {
      getPlatformAndPlatVersion () {
        var vm = this
        vm.$http({
          url: vm.$http.adornUrl('/crash/getPlats'),
          methods: 'get'
        }).then(({data}) => {
          if (data && data.code === 0) {
            var platforms = data.data
            vm.crashForm.platforms = []
            for (let i in platforms) {
              var platform = {label: i, value: i, versions: []}
              platform.versions = platforms[i].map(item => {
                return {label: item, value: item}
              })
              vm.crashForm.platforms.push(platform)
            }
          }
        })
      },
      getAppVersions () {
        var vm = this
        vm.$http({
          url: vm.$http.adornUrl('/crash/getAppVersion'),
          methods: 'get'
        }).then(({data}) => {
          if (data && data.code === 0) {
            vm.crashForm.appVersions = []
            data.data.map(item => {
              if (item !== null) {
                vm.crashForm.appVersions.push({value: item, label: item})
              }
            })
          }
        })
      },
      getDeviceBrands () {
        var vm = this
        vm.$http({
          url: vm.$http.adornUrl('/crash/getDeviceBrand'),
          methods: 'get'
        }).then(({data}) => {
          if (data && data.code === 0) {
            vm.crashForm.deviceBrands = data.data.map(item => {
              return {value: item, label: item}
            })
          }
        })
      },
      getCrashList () {
        var vm = this

        vm.isLoading = true

        var params = []
        var platform = vm.crashForm.platform
        if (JSON.stringify(platform) !== '[]' && platform !== null && platform !== '') {
          params.push('platform=' + platform)
        }

        var platVersion = vm.crashForm.platVersion
        if (JSON.stringify(platVersion) !== '[]' && platVersion !== null && platVersion !== '') {
          params.push('platVersion=' + platVersion)
        }

        var appVersion = vm.crashForm.appVersion
        if (JSON.stringify(appVersion) !== '[]' && appVersion !== null && appVersion !== '') {
          params.push('appVersion=' + appVersion)
        }

        var deviceBrand = vm.crashForm.deviceBrand
        if (JSON.stringify(deviceBrand) !== '[]' && deviceBrand !== null && deviceBrand !== '') {
          params.push('deviceBrand=' + deviceBrand)
        }

        var type = vm.crashForm.type
        if (type !== null && type !== '' && type !== '全部') { // 全部则不传参数
          params.push('type=' + type)
        }

        if (vm.crashForm.dateSelect !== null && vm.crashForm.dateSelect !== '') {
          var startTime = vm.crashForm.dateSelect[0]
          params.push('startTime=' + moment(startTime).format('YYYY-MM-DD HH:mm:ss'))

          var endTime = vm.crashForm.dateSelect[1]
          params.push('endTime=' + moment(endTime).format('YYYY-MM-DD HH:mm:ss'))
        }

        var unionId = vm.crashForm.unionId
        if (unionId !== null && unionId !== '') {
          params.push('unionId=' + unionId)
        }

        if (vm.currPage !== null && vm.currPage !== '') {
          params.push('currPage=' + vm.currPage)
        }

        if (vm.pageSize !== null && vm.pageSize !== '') {
          params.push('pageSize=' + vm.pageSize)
        }

        var url = '/crash/list'
        url += (params.length > 0 ? '?' + params.join('&') : '')
        // console.log(url)

        vm.$http({
          url: vm.$http.adornUrl(url),
          methods: 'get'
        }).then(({data}) => {
          if (data && data.code === 0) {
            vm.crashList = data.rows.list
            vm.totalCount = data.rows.totalCount
            vm.isLoading = false
          }
        })
      },
      changePlatform (value) {
        var vm = this
        if (value !== '') {
          var platforms = vm.crashForm.platforms
          for (let i = 0; i < platforms.length; i++) {
            if (platforms[i].value === value) {
              vm.crashForm.platVersions = platforms[i].versions
            }
          }
        } else {
          vm.crashForm.platVersions = []
        }
        vm.crashForm.platVersion = ''
        // vm.getCrashList()
      },
      handleSizeChange (val) {
        var vm = this
        vm.pageSize = val
        vm.getCrashList()
      },
      handleCurrentChange (val) {
        var vm = this
        vm.currPage = val
        vm.getCrashList()
      }
    }
  }
</script>
<style>
  .crash-box .query-form{
    text-align: left;
    margin-bottom: 10px;
    /* border-bottom: 1px solid #eee; */
  }
  .crash-box .el-select{
    /* width: 100px; */
    /* width: 140px; */
  }
  .crash-box .date-picker{
    /* width: 372px; */
    /* width: 385px; */
  }
  .crash-box .card-number{
    /* width: 115px; */
    /* width: 140px; */
  }
  .crash-box .el-button{
    padding: 8px 15px;
    font-size: 14px;
  }
  .table-form-expand{
    font-size: 0;
  }
  .table-form-expand label {
    display: inline-block;
    width: 90px;
    color: #99a9bf;
    text-align: right;
    font-size: 14px;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .table-form-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  .table-form-expand .el-form-item.width-block {
    width: 100%;
  }

  .crash-box .el-tooltip__popper{
    max-width:50% !important;
  }
</style>

